<template>
<div  class="center" style="margin-top: 30px;margin-bottom: 150px">
    <el-row :gutter="20">
        <!--左侧侧栏-->
        <el-col :span="4">
            <el-card style="height: 500px">
                <el-menu
                    class="el-menu-vertical-demo">
                    <el-menu-item class="side_info" index="1" @click="gotoAccount()"><i class="el-icon-menu"></i><span>个人资料</span></el-menu-item>
                    <el-menu-item class="side_info" index="2" @click="gotoInfo()"><i class="el-icon-menu"></i><span>真实信息</span></el-menu-item>
                </el-menu>
            </el-card>
        </el-col>

        <!--右侧主体-->
        <el-col :span="20" >
            <router-view/>
        </el-col>
    </el-row>
</div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return {
            loginInfo:{},
        }
    },
    methods: {
        gotoAccount() {
            if (this.$route.path!=='/personal/user/account') {
                this.$router.push('/personal/user/account');
            }
        },
        gotoInfo() {
            if (this.$route.path!=='/personal/user/info') {
                this.$router.push('/personal/user/info');
            }
        },
        loadCurrentLoginInfo(){
            let loginInfoString=localStorage.getItem('loginInfo')

            this.loginInfo = JSON.parse(loginInfoString);
            if (!this.loginInfo) {
                this.$router.push('/login/user');
                return;
            }else if (this.loginInfo.role!==1&&this.loginInfo.role!==2){
                this.$message.error('无权访问');
                this.$router.push('/home');
                return;
            }
        },
    },
    created() {

    },
    mounted() {
        this.loadCurrentLoginInfo();
    }
}
</script>
<style>
body{
    background-color: rgb(241,242,243);
}
.center{
    margin:0 auto;
    width:1200px
}
.side_info:hover{
    background-color: #e5f6e1;
}
.side_info:focus{
    color: #69bb55;
    background-color: #e5f6e1;
}
.side_info.is-active {
    color: #69bb55;
}
</style>